<template>
	<view class="work-order">
		<view class="flex justify-evenly align-center today-result ">
			<view class="item">
				<view class="value">{{review.Qty1}}</view>
				<view class="label">{{review.Qty1Name}}</view>
			</view>
			<view class="center-line"></view>
			<view class="flex justify-center direction-column align-center item">
				<u--text v-if="review.Qty2" color="#fff" size="48rpx" mode="price" :text="review.Qty2"></u--text>
				<view class="label">{{review.Qty2Name}}</view>
			</view>
		</view>
		<view class="p-3 menus">
			<navigator url="/pages/workOrder/myOrder/myOrder" class="flex align-center menu-item">
				<image src="/static/work-order/work-order-my.png"></image>
				<view class="title">我的工单</view>
				<view v-if="myFunction.NotRepairDoneQty" class="flex align-center justify-center num">{{myFunction.NotRepairDoneQty}}</view>
			</navigator>
			<navigator url="/pages/workOrder/newOrder/newOrder" class="flex align-center menu-item">
				<image src="/static/work-order/work-order-grab.png"></image>
				<view class="title">我的抢单</view>
				<view v-if="myFunction.QiangDanQty" class="flex align-center justify-center num">{{myFunction.QiangDanQty}}</view>
			</navigator>
			<navigator url="/pages/workOrder/timeoutOrder/timeoutOrder" class="flex align-center menu-item">
				<image src="/static/work-order/work-order-timeout.png"></image>
				<view class="title">超时工单</view>
				<view v-if="myFunction.NotRepairDoneQty" class="flex align-center justify-center num">{{myFunction.TimeOutQty}}</view>
			</navigator>
		</view>
	</view>
</template>

<script>
	import {
		workOrderDefault
	} from "@/apis/workOrder.js";
	export default {
		data() {
			return {
				appMessageReadStatus: 0,
				myFunction: {},
				review: {}
			};
		},
		async onLoad() {
			const res = await workOrderDefault()
			if (res.MsgCode != 0) return
			this.myFunction = res.data.MyFunction
			this.review = res.data.Review
			const appMessageReadStatus = res.data.AppMessage.AppMessageReadStatus
			this.appMessageReadStatus = appMessageReadStatus
			const redDotEle = document.querySelector('.uni-page-head-btn-red-dot')
			if(appMessageReadStatus != 0){
				redDotEle.setAttribute('badge-text', appMessageReadStatus)
			}else{
				redDotEle.classList.add("hide-page-head-red-dot");
			}

		},
		onNavigationBarButtonTap(e) {
		  uni.navigateTo({
		  	url: '/pages/my/myMessage/myMessage'
		  })
		},
		
	}
</script>

<style lang="scss">
	.work-order {
		background-color: #F8FAF9;

		.menus {
			.menu-item {
				background-color: #fff;
				box-shadow: $s-bg-shadow;
				border-radius: $s-border-radius;
				margin-bottom: 32rpx;
				padding: 48rpx;

				image {
					width: 96rpx;
					height: 96rpx;
					margin-right: 40rpx;
				}

				.title {
					color: $s-text-color;
					font-size: 36rpx;
					margin-right: 18rpx;
				}

				.num {
					background-color: $s-manager-color;
					border-radius: 24rpx;
					color: #fff;
					font-size: 32rpx;
					width: 120rpx;
					height: 48rpx;
				}
			}
		}

		.today-result {
			width: 750rpx;
			height: 320rpx;
			background: url('~@/static/work-order/workOrder-head-bg.png') no-repeat;
			background-size: 100% 100%;

			.center-line {
				background-color: #fff;
				width: 2rpx;
				height: 120rpx;

			}

			.item {
				width: calc(50% - 1rpx);
				color: #fff;
				text-align: center;
				
				::v-deep .u-text{
					width: initial;
					.u-text__price{
						display: none;
					}
				}
				.value {
					font-size: 48rpx;
				}
				.label {
					font-size: 28rpx;
				}
			}
		}
	}
</style>
